<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 菜单 -->
  <div>
    <a href="#/">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
  </div>
  <div id="content">
    <!-- 内容 -->
  </div>
  <!-- 前端路由：根据hash值得改变，去更新页面内容。-->
  <!-- 
    1. 监听hash值得改变
      - window.onhashchange = function() { console.log('ok') } 
    2. 改变后渲染对应内容
      - 获取hash  location.hash  然后去判断  渲染不同内容
   -->
  <script>
    // 内容容器
    const content = document.querySelector('#content')
    // 监听hash改变
    window.onhashchange = function () {
      // 改变后的hash
      const hash = location.hash
      // path 值可能是：/   /my   /friend
      const path = hash.replace('#', '')
      // 判断路径
      switch (path) {
        case '/':
          content.innerHTML = '发现音乐的网页内容'
          break;
        case '/my':
          content.innerHTML = '我的音乐的网页内容'
          break;
        case '/friend':
          content.innerHTML = '朋友F的网页内容'
          break;
        default:
          break;
      }
    }
  </script>
</body>

</html>